import React, { Component } from 'react'
import classnames from 'classnames'
import './02-style.css'

/*
  1. 安装： cnpm i classnames
  2. 导入 import classnames from 'classnames'
  3. 通过 classnames 函数定义 class
  const divClass = classnames({
      'content': true,
      'active': this.state.flag,
      'box': !this.state.flag
    })
  4. 在标签中使用我们定义的 class
*/

export default class App extends Component {

  // 定义当前  App 组件的数据
  state = {
    flag: true
  }

  render() {

    // 定义 class
    const divClass = classnames({
      'content': true,
      'active': this.state.flag,
      'box': !this.state.flag
    })

    return (
      <div className={divClass} onClick={()=>{

        this.setState({
          flag: !this.state.flag
        })

      }}>App</div>
    )
  }
}
